অ্যাঙ্গুলার জেএস ফর্ম - AngularJs Form
AngularJS এ ফর্ম, ইনপুট কন্ট্রোলের ভ্যালিডেশন ও ডাটা বাইন্ডিং প্রদান করে।
ইনপুট কন্ট্রোল
ইনপুট কন্ট্রোল হলো এইচটিএমএল ইনপুট এলিমেন্টঃ
- ইনপুট এলিমেন্ট
- সিলেক্ট এলিমেন্ট
- বাটন এলিমেন্ট
- টেক্সট-এরিয়া এলিমেন্ট
ডাটা বাইন্ডিং
ng-model ডিরেক্টিভ দ্বারা ইনপুট কন্ট্রোল ডাটা বাইন্ডিং প্রদান করে।
<input type="text" ng-model="fname">
এখন এপ্লিকেশনটির fname নামে একটি প্রোপার্টি রয়েছে।
ng-model ডিরেক্টিভ আপনার সম্পূর্ন এপ্লিকেশনের সাথে ইনপুট কন্ট্রোলকে বাইন্ড করে দেয়।
fname প্রোপার্টিকে একটি কন্ট্রোলারে রেফার করা যেতে পারে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
নামঃ <input type="text" ng-model="fname">
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.fname = "Tamim";
});
</script>
</body>
</html>
ফলাফল
এটি এপ্লিকেশনের মধ্যে অন্য যেকোনো স্থানে রেফার করা যেতে পারে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="">
<form>
নামঃ <input type="text" ng-model="fname">
</form>
<h3>আপনি লিখেছেনঃ {{fname}}</h3>
</div>
</body>
</html>
ফলাফল
চেকবক্স
চেকবক্সের true বা false ভ্যালু রয়েছে। চেকবক্সের মধ্যে ng-model ডিরেক্টিভ এপ্লাই এবং এর ভ্যালু আপনার এপ্লিকেশনের মধ্যে ব্যবহার করুন।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="">
<form>
হেডার শো করাতে চেক করুনঃ
<input type="checkbox" ng-model="myVar">
</form>
<h3 ng-show="myVar">হেডার</h3>
</div>
</body>
</html>
ফলাফল
রেডিও বাটন
আপনার এপ্লিকেশনে ng-model ডিরেক্টিভ দ্বারা রেডিও বাটন যুক্ত করুন।
ng-model সহ সকল রেডিও বাটনের একাধিক ভ্যালু থাকতে পারে, কিন্তু শুধুমাত্র সিলেক্ট করাটাই ব্যবহৃত হবে।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body ng-app="">
<form>
একটি টপিক সিলেক্ট করুনঃ
<input type="radio" ng-model="myVar" value="animals">Animals
<input type="radio" ng-model="myVar" value="tuts">Fruits
<input type="radio" ng-model="myVar" value="cars">Cars
</form>
<div ng-switch="myVar">
<div ng-switch-when="animals">
<h3>Animals</h3>
<p>animals দুনিয়ায় আপনাকে স্বাগতম।</p>
</div>
<div ng-switch-when="tuts">
<h3>Fruits</h3>
<p>fruits সম্পর্কে পড়ুন।</p>
</div>
<div ng-switch-when="cars">
<h3>Cars</h3>
<p>cars সম্পর্কে পড়ুন।</p>
</div>
</div>
</body>
</html>
ফলাফল
myVar এর ভ্যালু হয় animals, বা fruits, বা cars হবে
সিলেক্ট বক্স
আপনার এপ্লিকেশনে ng-model ডিরেক্টিভ দ্বারা সিলেক্ট বক্স যুক্ত করুন।
ng-model এট্রিবিউটে ডিফাইন করা প্রোপার্টির ভ্যালু হবে সিলেক্ট বক্সে সিলেক্ট করা অপশনের ভ্যালু।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body ng-app="">
<form>
একটি টপিক সিলেক্ট করুনঃ
<select ng-model="myVar">
<option value="">
<option value="animals">Animals
<option value="tuts">Fruits
<option value="cars">Cars
</select>
</form>
<div ng-switch="myVar">
<div ng-switch-when="dogs">
<h3>Animals</h3>
<p>animals দুনিয়ায় আপনাকে স্বাগতম।</p>
</div>
<div ng-switch-when="tuts">
<h3>Fruits</h3>
<p>fruits সম্পর্কে পড়ুন।</p>
</div>
<div ng-switch-when="cars">
<h3>Cars</h3>
<p>cars সম্পর্কে পড়ুন।</p>
</div>
</div>
</body>
</html>
ফলাফল
myVar এর ভ্যালু হয় animals, বা fruits, বা cars হবে
AngularJS ফর্মের উদাহরণ
form = {{user}}
master = {{master}}
এপ্লিকেশন কোড
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
</script>
<title>AngularJS উদাহরণ</title>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
নামঃ<br>
<input type="text" ng-model="user.fName"><br>
বয়সঃ<br>
<input type="text" ng-model="user.age">
<br><br>
<button ng-click="reset()">রিসেট</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {fName:"Tamim", age:"25"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
ng-app ডিরেক্টিভ AngularJS এপ্লিকেশনকে ডিফাইন করে।
ng-controller ডিরেক্টিভ এপ্লিকেশন কন্ট্রোলারকে ডিফাইন করে।
ng-model ডিরেক্টিভ মডেলের ইউজার অবজেক্টে দুটি ইনপুট এলিমেন্টকে সংযুক্ত করে।
formCtrl কন্ট্রোলার মাস্টার অবজেক্টের ইনিশিয়াল ভ্যালু সেট করে এবং reset() মেথড ডিফাইন করে।
reset() মেথড মাস্টার অবজেক্টের সমান করে ইউজার অবজেক্টকে সেট করে।
ng-click ডিরেক্টিভ reset() মেথডকে ইনভুক করে। এটি শুধুমাত্র বাটন ক্লিক করলে ঘটে।